<template>
	<view class="bookDetailpages">
		<div class="top">
			<span class="iconfont icon-zuojiantou" @click="go"></span>
			<span>{{title}}</span>
			<span></span>
		</div>
		<view class="text" v-html="list.content">
			
		</view>
		<div class="footer">
			<div class="left"><span class="iconfont icon-zuojiantou" @click="zuo"></span></div>
			<div class="center" @click="showDrawer">{{active+1}}/{{list.menus.length}}</div>
			<div class="right"><span class="iconfont icon-youjiantou" @click="you"></span></div>
		</div>
		<uni-drawer ref="showRight" mode="left" :mask-click="false" maskClick="true ">
					<scroll-view style="height: 100%;" scroll-y="true">
						<view class="content" v-for="(item,index) in list.menus" :key="index" @click="kan(item)">
							<div class="left">00{{item.orderby+1}}</div>
							<div class="right">
								<p>{{item.title}}</p>
								<p v-if="item.isfree==1">免费试看</p>
							</div>
						</view>
					</scroll-view>
		</uni-drawer>
	</view>
</template>		

<script>
	import {getlistdetail} from '../request/index.js'
	export default{
		data() {
			return {
				title:'',
				list:{},
				active:0,
				book_id:"",
				id:""
			}
		},
		methods:{
			go(){
				uni.navigateBack(1)
			},
			showDrawer() {
				this.$refs.showRight.open();
			    },
			closeDrawer() {
				this.$refs.showRight.close();
				},
				zuo(){
					this.active--
					if(this.active<=0){
						this.active=1
					}
				},
				you(){
					this.active++
					if(this.active>=this.list.menus.length){
						this.active=this.list.menus.length
					}
					console.log();
					let id=this.list.menus[this.active].id
					this.getlist(this.book_id,id)
				},
				kan(val){
					console.log(val);
					this.active=val.orderby
					this.getlist(this.book_id,val.id)
					this.$refs.showRight.close();
				},
				getlist(book_id,id){
					getlistdetail({book_id:book_id,id:id}).then(res=>{
						this.list=res.data.data
						this.title=res.data.data.title
						if(res.data.data=="请先购买该电子书"){
							uni.showToast({
								icon:'error',
								title:res.data.data	
							})
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}
						console.log(res);
					})
				}
		},
		onLoad(options) {
			this.title=options.val
			this.book_id=parseInt(options.book_id)
			this.id=parseInt(options.id)
			this.getlist(this.book_id,this.id)
		}
	}
</script>

<style lang="scss">
	.bookDetailpages{
		width: 100%;
		height: 100%;
		position: absolute;
	.top{
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 10px;
	}
	.footer{
		position: fixed;
		width: 100%;
		height: 50px;
		line-height: 50px;
		bottom: 0;
		right:0;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 10px;
	}
	@keyframes left {
		0%{
			transform: translateX(-230px);
		}
		100%{
			transform: translateX(0px);
		}
	}
		.content{
			display: flex;
			height: 82px;
			align-items: center;
			border-bottom: 1px solid #ccc;
			.left{
				width: 60px;
				text-align: center;
			}
			.right{
				flex: 1;
				
				p:nth-child(2){
					width: 80px;
					text-align: center;
					font-size: 14px;
					color: #dc3646;
					border: 1px solid #dc3646;
					border-radius: 5px;
				}
			}
		}
	}
</style>